<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <!-- 引用的公共重置样式 -->
    <link rel="stylesheet" href="static/css/reset.css">
    <!-- 引用的本地样式 -->
    <link rel="stylesheet" href="static/css/details.css">
    <!-- 引用公共底部 -->
    <link rel="stylesheet" href="static/css/footer.css">
</head>

<body>
    <!-- 头部部分 -->
    <div class="header">
        <!-- log图片 -->
        <div>
            <img class="header-logo" src="static\imgs\logo.png" alt="">
        </div>
        <!-- 头部版心 -->
        <div class="header-c">
            <div class="nav">
                <a class="nav-item active" href="">
                    <li class="item-link">首页</li>
                </a>
                <a class="nav-item" href="">
                    <li class="item-link">女装</li>
                </a>
                <a class="nav-item" href="">
                    <li class="item-link">男装</li>
                </a>
                <a class="nav-item" href="">
                    <li class="item-link">箱包</li>
                </a>
                <a class="nav-item" href="">
                    <li class="item-link">配饰</li>
                </a>
            </div>
            <!-- 搜索框 -->
            <div class="user-search">
                <div class="search">
                    <input type="text" class="search-text">
                    <a href="#"><img class="search-img" src="static\imgs\serrch1.png" alt="图片未找到">
                    </a>
                </div>
                <div class="user">
                    <a href="">
                        <img class="user-like" src="static\imgs\like.png" alt="">
                    </a>
                    <a href="">
                        <img class="user-cart" src="static\imgs\cart.png" alt="">
                    </a>
                    <a href="">
                        <img class="user-img" src="static\imgs\user.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品详情部分 -->
    <div class="content">
        <!-- 商品的图片及选择的部分 -->
        <div class="content-menu">
            <!-- 商品的详情 -->
            <div class="menu-img">
                <div class="menu-colum">
                    <a class="colum-top" href="">
                        <img class="colum-top-img" src="static\imgs\top.png" alt="">
                    </a>
                    <ul class="colum-list">
                        <li class="list-item">
                            <img class="item-img" src="static\imgs\colum1.png" alt="">
                        </li>
                        <li class="list-item">
                            <img class="item-img" src="static\imgs\colum2.png" alt="">
                        </li>
                        <li class="list-item">
                            <img class="item-img" src="static\imgs\colum3.png" alt="">
                        </li>
                        <li class="list-item">
                            <img class="item-img" src="static\imgs\colum4.png" alt="">
                        </li>
                        <li class="list-item">
                            <img class="item-img" src="static\imgs\colum4.png" alt="">
                        </li>
                    </ul>
                    <a class="colum-bottom" href="">
                        <img class="colum-bottom-img" src="static\imgs\bottom.png">
                    </a>
                </div>
                <div class="colum-details">
                    <img class="details-img" src="static\imgs\cloum-big.png" alt="">
                </div>
            </div>
            <!-- 可选择的内容 -->
            <div class="menu-details">
                <p class="details-text1">
                    女装外套 牛仔短茄克 春季上新 牛仔外套 水洗产品【100%棉】448126
                </p>
                <div class="details-text2">
                    <span class="details-text2-red">¥399.00</span>
                    <span class="details-text2-black">初上市价格¥499.00</span>
                </div>
                <div class="details-select">
                    <!-- 颜色 -->
                    <div class="select-colour">
                        <p class="colour-text">
                            颜色:
                        </p>
                        <div class="colour-box1"></div>
                        <div class="colour-box2"></div>
                        <div class="colour-box3"></div>
                        <div class="colour-box4"></div>
                    </div>
                    <!-- 数量 -->
                    <div class="select-amount">
                        <p class="amount-text">
                            数量:
                        </p>
                        <div class="amount-main">
                            <span class="amount-add">+</span>
                            <input class="amount-entry" type="text">
                            <span class="amount-reduce">-</span>
                        </div>
                    </div>
                </div>
                <!-- 尺寸 -->
                <ul class="size">
                    <li class="size-item">150/76A/XS</li>
                    <li class="size-item ize-item-2">155/80A/S</li>
                    <li class="size-item">160/84A/M</li>
                    <li class="size-item">160/88A/L</li>
                    <li class="size-item">165/92A/XL</li>
                    <li class="size-item">170/100B/XXL</li>
                    <li class="size-item">175/108C/3XL</li>
                </ul>
                <!-- 配送方式 -->
                <div class="send-service">
                    <span>配送方式:</span>
                    <label class="send-type-label">
                        <input type="radio" checked class="send-select" name="sendSelect">
                        <span class="radio-icon"></span>
                        快递配送
                    </label>
                    <label class="send-type-label second">
                        <input type="radio" class="send-select" name="sendSelect">
                        <span class="radio-icon"></span>
                        门店自取
                    </label>
                </div>
                <!-- 收藏分享 -->
                <div class="collect-shaer">
                    <span class="goods-rejected">支持30天无理由退货</span>
                    <a class="collect-button" href="">
                        <img class="collect-img" src="static\imgs\like.png" alt="">
                        <span class="collect-text">收藏</span>
                    </a>
                    <a class="shaer-button" href="">
                        <img class="shaer-img" src="static\imgs\shaer.png" alt="">
                        <span class="shaer-text">分享</span>
                    </a>
                </div>
                <!-- 购买与加入购物车按钮 -->
                <div class="cart-button">
                    <a class="order-now-button" href="">立即购买</a>
                    <a class="shopping-cart-button" href="">加入购物车</a>
                </div>
            </div>
        </div>
        <!-- 商品的细节 -->
        <div class="details">
            <!-- 细节导航 -->
            <div class="details-nav">
                <a class="nav-inf active" href="">商品详情</a>
                <a class="nav-assess" href="">商品评价</a>
                <a class="nav-consult" href="">购买咨询</a>
            </div>
            <!-- 商品参数 -->
            <div class="parameter">
                <p class="product-parameters">产品参数:</p>
                <div class="parameters-details">
                    <div class="parameters-box1">
                        <span class="product-number">产品货号：448126000</span>
                        <span class="product-colour">商品颜色：00白色 10水粉色 54绿色 67蓝色</span>
                    </div>
                    <div class="parameters-box2">
                        <span class="listing-season">上市季节：2022年春季</span>
                        <ul class="commodity-material">
                            <li class="material-name">商品材质：[面料]尼龙100%，[亲里]聚酯纤维100%，</li>
                            <li class="material-details">
                                [填充物]聚酯纤维100%，[包边]尼龙100%
                            </li>
                        </ul>
                    </div>
                    <div class="size-description">
                        <div class="inner-begin">
                            商品尺码：
                        </div>
                        <div class="inner-c">
                            150/76A/XS 155/80A/S 160/84A/M
                            <br> 160/88A/L 165/92A/XL 170/100B/XXL
                            <br> 175/108C/3XL
                        </div>
                    </div>
                </div>
            </div>
            <!-- 产品展示 -->
            <div class="product-display">
                <div class="product-display-c">
                    <img class="product-display-black" src="static\imgs\Black line.png" alt="">
                    <p class="product-display-name">产品展示</p>
                </div>
                <img class="product-display-img" src="static\imgs\product-display.png" alt="">
            </div>
            <div class="dimension-table">
                <div class="dimension-table-c">
                    <img class="dimension-table-black" src="static\imgs\Black line.png" alt="">
                    <p class="dimension-table-name">商品尺寸</p>
                </div>
                <img class="dimension-table-img" src="static\imgs\dimension-table.png" alt="">
            </div>
            <div class="product-details">
                <div class="product-details-c">
                    <img class="product-details-black" src="static\imgs\Black line.png" alt="">
                    <p class="product-details-name">产品细节</p>
                </div>
                <img class="product-details-img" src="static\imgs\product-details.png" alt="">
            </div>
            <div class="product-description">
                <div class="product-description-c">
                    <img class="product-description-black" src="static\imgs\Black line.png" alt="">
                    <p class="product-description-name">商品说明</p>
                </div>
                <img class="product-description-img1" src="static\imgs\product-description-img1.png" alt="">
                <img class="product-description-img2" src="static\imgs\product-description-img2.png" alt="">
            </div>
        </div>
        <!-- 商品推荐部分 -->
        <div class="hot">
            <div class="hot-mark">
                <img class="hot-mark-black" src="static\imgs\Black line.png" alt="">
                <p class="hot-mark-name">店铺推荐</p>
            </div>
            <div class="hot-recommendation">
                <div class="recommendation-no1">
                    <img class="recommendation-no1-img" src="static\imgs\recommendation.png" alt="">
                    <p class="recommendation-no1-text1">
                        设计师合作款·千鸟格大衣  冬季上新【羊毛】
                    </p>
                    <p class="recommendation-no1-text2">
                        【S-XL】
                    </p>
                    <div class="recommendation-no1-price">
                        <span class="no1-price">¥799</span>
                        <img class="no1-like" src="static\imgs\like.png" alt="">
                        <img class="no1-cart" src="static\imgs\cart.png" alt="">
                    </div>
                </div>
                <div class="recommendation-no2">
                    <img class="recommendation-no2-img" src="static\imgs\recommendation.png" alt="">
                    <p class="recommendation-no2-text1">
                        设计师合作款·千鸟格大衣  冬季上新【羊毛】
                    </p>
                    <p class="recommendation-no2-text2">
                        【S-XL】
                    </p>
                    <div class="recommendation-no2-price">
                        <span class="no2-price">¥799</span>
                        <img class="no2-like" src="static\imgs\like.png" alt="">
                        <img class="no2-cart" src="static\imgs\cart.png" alt="">
                    </div>
                </div>
                <div class="recommendation-no3">
                    <img class="recommendation-no3-img" src="static\imgs\recommendation.png" alt="">
                    <p class="recommendation-no3-text1">
                        设计师合作款·千鸟格大衣  冬季上新【羊毛】
                    </p>
                    <p class="recommendation-no3-text2">
                        【S-XL】
                    </p>
                    <div class="recommendation-no3-price">
                        <span class="no3-price">¥799</span>
                        <img class="no3-like" src="static\imgs\like.png" alt="">
                        <img class="no3-cart" src="static\imgs\cart.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="footer">
        <div class="footer-c">
          <img class="left-img" src="static/imgs/logo.png" alt="">
          <div class="footer-c-script">
            <ul class="script-list" >
              <li class="list-item">门店资讯</li>
              <li class="list-item line">|</li>
              <li class="list-item">网络购物FAQ</li>
              <li class="list-item line">|</li>
              <li class="list-item">关于BALANCE</li>
              <li class="list-item line">|</li>
              <li class="list-item">电子报订阅</li>
              <li class="list-item line">|</li>
              <li class="list-item">买卖定型化契约</li>
              <li class="list-item line">|</li>
              <li class="list-item">政府政令宣传</li>
            </ul>
            <div class="copyright">
              <p class="copyrigh-script">Copyright © BALANCE Ltd. All rights reserved</p>
            </div>
            <div class="qr">
              <img class="qr-img" src="static/imgs/long_qr.png" alt="">
              <img class="qr-img" src="static/imgs/qr.png" alt="">
            </div>
          </div>
        </div>
      </div>

</body>

</html>